<script setup lang="ts">
// import { watch } from "vue";
// import { useImageVerify } from "./hooks";

import {onMounted, reactive} from "vue";
import {getAuthCode} from "@/api/login";

defineOptions({
  name: "ReImageVerify"
});

// interface Props {
//   code?: string;
// }

// interface Emits {
//   (e: "update:code", code: string): void;
// }
//
// const props = withDefaults(defineProps<Props>(), {
//   code: ""
// });
//
// const emit = defineEmits<Emits>();
//
// const { domRef, imgCode, setImgCode, getImgCode } = useImageVerify();
//
// watch(
//   () => props.code,
//   newValue => {
//     setImgCode(newValue);
//   }
// );
// watch(imgCode, newValue => {
//   emit("update:code", newValue);
// });

// defineExpose({ getImgCode });
interface AuthCode {
  img: string
  uuid: string
}
const codeData: AuthCode = reactive({
  img: '',
  uuid: ''
})
const getAuthCodeData = async () => {
  return new Promise<AuthCode>(async (resolve, reject) => {
    resolve(await getAuthCode())
  })
}
const setAuthCodeData = async () => {
  const {img, uuid} = await getAuthCodeData()
  codeData.img = img
  codeData.uuid = uuid
}

onMounted(async ()=> {
  setAuthCodeData()
})
defineExpose({
  codeData,
  setAuthCodeData
})
</script>

<template>
  <div class="w-[120px] h-[40px] bg-[#FFFFFF]" @click="setAuthCodeData">
    <img class="w-full h-full" :src="codeData.img">
  </div>
</template>
